<template>
  <view>
    <view class="hearder pad20">
      <view class="left">
        <image v-if="model.storeCover" :src="model.storeCover"></image>
        <image v-else src="/static/images/value.jpg"></image>
        <text class="title">{{ model.name }}</text>
        <!-- <label>关注</label> -->
      </view>
      <view class="title"> {{ num }}款商品 </view>
      <!-- <view class="right">
        <image src="../../static/images/face.png"></image>
        <text>分享</text>
      </view> -->
    </view>
    <view class="descimg pad20">
      <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
        <view class="scro_item" v-for="(img, index) in imags" :key="index">
          <image :src="img" mode="aspectFill"></image>
          <view class="text">店内环境</view>
        </view>
      </scroll-view>
    </view>
    <view class="bigImage pad20">
      <image v-if="model.introduce" :src="model.introduce"></image>
      <image v-else src="/static/images/noneShop.png" mode="aspectFit"></image>
    </view>
    <view class="allDesc pad20">
      <view class="all">
        <image src="/static/images/like.png"></image>
        <text>全部商品详情</text>
      </view>

      <navigator
        hover-class="none"
        :url="`/pages/entity_alliance/shop_goods?storeId=${model.id}`"
        class="more"
        >查看更多></navigator
      >
    </view>
  </view>
</template>

<script>
import { queryBusinessProduct } from "@/api/store.js";
export default {
  data() {
    return {
      model: {},
      imags: [],
      num: 0,
    };
  },
  onLoad(options) {
    const { record } = options;
    const _reord = JSON.parse(record);
    this.model = _reord;
    this.getQueryBusinessProduct(_reord.id);
    this.imags = _reord.storeImg.split(",") || [];
  },
  methods: {
    // 获取商品数量
    getQueryBusinessProduct(id) {
      queryBusinessProduct(id).then((res) => {
        this.num = res.data || 0;
      });
    },
  },
};
</script>
<style>
>>> .uni-scroll-view-content {
  display: flex;
}
</style>
<style lang="scss" scoped>
.hearder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 30rpx;
  border-bottom: 1px dashed #aaa;

  .left {
    display: flex;
    flex:1;
    align-items: center;

    .title {
      font-size: 35rpx;
      font-weight: bold;
      color: black;
      margin-left: 20rpx;
      //   white-space: nowrap;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   width: 300rpx;
    }

    label {
      background-color: #ea5548;
      border-radius: 50px;
      color: white;
      padding: 5rpx 20rpx;
      font-weight: bold;
    }

    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 10rpx;
    }
  }
  .title {
    color: #aaa;
    font-size: 26rpx;
    padding: 10rpx 0 30rpx 0;
  }
  .right {
    display: flex;
    align-items: item;
    justify-content: center;
    background-color: #ea5548;
    width: 150rpx;
    height: 60rpx;
    padding: 10rpx 0;
    border-radius: 50px;
    color: white;
    font-size: 30rpx;
    font-weight: bold;

    image {
      height: 40rpx;
      width: 40rpx;
    }
  }
}

.descimg {
  background-color: #fff;

  .scroll-view_H {
    display: flex;
    white-space: nowrap;
    width: 100%;
    .scro_item {
      position: relative;
      display: flex;
      white-space: nowrap;
      width: 300rpx;
    }
    .text {
      position: absolute;
      bottom: 20rpx;
      left: 90rpx;
      font-weight: bold;
      color: white;
    }
    image {
      height: 300rpx;
      width: 300rpx;
      border-radius: 30rpx;
      margin-right: 20rpx;
    }
  }
}

.bigImage {
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 20rpx 0;

  image {
    width: 100%;
    height: 40vh;
    border-radius: 30rpx;
  }
}

.allDesc {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .all {
    display: flex;
    align-items: center;
    font-size: 35rpx;
    font-weight: bold;
    color: black;

    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }
  }

  .more {
    color: red;
  }
}
</style>
